<template>
  <div class="person">
    <h3>姓名:{{ person.name }}</h3>
    <h3>年龄:{{ person.age }}</h3>
    <h3>汽车:{{ person.car.c1 }},{{ person.car.c2 }}</h3>
    <br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar1">修改汽车1</button>
    <button @click="changeCar2">修改汽车2</button>
    <button @click="changeCar">修改所有汽车</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {reactive,watch} from 'vue';
    //数据
    let person=reactive({
      name:"沐七",
      age:18,
      car:{
        c1:"aodi",
        c2:"benchi"
      }
    })

    //方法
    function changeName(){
      person.name+="~"
    }
    function changeAge(){
      person.age++
    }
    function changeCar1(){
      person.car.c1="bmw"
    }
    function changeCar2(){
      person.car.c2="byd"
    }
    function changeCar(){
      person.car={c1:"爱玛",c2:"雅迪"}
    }

    //监视
    //情况四:监视响应式对象中的某个属性，且该属性时基本类型的，要写成函数式
    /*watch(()=>{return person.name},(newValue,oldValue)=>{
      console.log("person.name变化了",newValue,oldValue);
    })*/

    //情况五:监视响应式对象中的某个属性，且该属性时依然是对象，建议写成函数式，且需手动开启深度监视
    //(能避免修改整个对象时无法监听到，因为换对象了，但是你初始监听的是老对象)
    watch(()=>{return person.car},(newValue,oldValue)=>{
      console.log("person.car变化了",newValue,oldValue);
    },{deep:true})


</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>